import ReactDOM from 'react-dom'
import './index.css'
import classnames from 'classnames'
const isRed = true
const isPink = false
const classArr = ['box']
if (isRed) classArr.push('abc')
if (isPink) classArr.push('def')
function classNames(obj) {
  console.log(Object.keys(obj));
  console.log(Object.keys(obj).filter(key => obj[key]));
  return Object.keys(obj).filter(key => obj[key]).join(' ')

}
const element = <div>
  <h1 className={isRed ? 'red' : 'red2'}>你好</h1>
  <h2 className={'red2'}>你好2</h2>
  {/* `red ${isRed ? 'red' : ''} ${isPink ? 'pink' : ''}` */}
  <h3 className={`red ${isRed ? ' red' : ''} ${isPink ? 'pink' : ''}`}>你好啊</h3>
  <p className={`red ${isRed ? ' red' : ''} ${isPink ? 'pink' : ''}`}>你好</p>
  <hr />
  <h1 className={classArr.join(' ')}>我是标题</h1>
  <h2 className={classNames({ red: true, abc: isRed, def: isPink })}>内容</h2>
  <h3 className={classnames('box', { red: isRed }, { red2: isPink })}>插件的内容</h3>
</div >

ReactDOM.render(element, document.getElementById('root'))